<template>
  <Card style="margin-top: 20px">
    <Row :gutter="16">
      <i-col span="6" class="statistic-item">
        <div class="img">
          <Tooltip content="用户总数" placement="top">
            <Avatar src="http://dd.ddandang.top/blog/images/users.png" size="30" />
          </Tooltip>
        </div>
        <div class="statistic">
          {{totalUser}}
        </div>
      </i-col>
      <i-col span="6">
        <div class="img">
          <Tooltip content="文章总数" placement="top">
            <Avatar src="http://dd.ddandang.top/blog/images/articleAmount.png" size="30" />
          </Tooltip>
        </div>
        <div class="statistic">
          {{totalArticle}}
        </div>
      </i-col>
      <i-col span="6">
        <div class="img">
          <Tooltip content="总点击数" placement="top">
            <Avatar src="http://dd.ddandang.top/blog/images/hit.png" size="30" />
          </Tooltip>
        </div>
        <div class="statistic">
          {{totalHits}}
        </div>
      </i-col>
      <i-col span="6">
        <div class="img">
          <Tooltip content="总评论数" placement="top">
            <Avatar src="http://dd.ddandang.top/blog/images/comment.png" size="30" />
          </Tooltip>
        </div>
        <div class="statistic">
          {{totalCommentAmount}}
        </div>
      </i-col>
    </Row>
  </Card>
</template>

<script>

  import {getTotalStatistics} from "@/network/statistic";

  export default {
    name: "Statistic",
    data() {
      return {
        totalArticle: 0,
        totalCommentAmount: 0,
        totalHits: 0,
        totalUser: 0
      }
    },
    mounted() {
      this.getTotalStatistics();
    },
    methods: {
      getTotalStatistics() {
        getTotalStatistics().then(res => {
          this.totalArticle = res.data.statisticVo.totalArticle;
          this.totalCommentAmount = res.data.statisticVo.totalComment;
          this.totalHits = res.data.statisticVo.totalHits;
          this.totalUser = res.data.statisticVo.totalUser;
        })
      }
    }
  }
</script>

<style scoped>
  .statistic-item {
    text-align: center;
  }
  .statistic {
    margin-top: 7px;
    text-align: center;
    font-size: 17px;
    font-family: 'Hiragino Sans GB',serif;
  }
</style>
